<template>
    <div class="_page night-reading-page">
        <ul class="note-list">
            <li v-for="itemList in noteDatas" :key="itemList.ym">
                <strong>{{ itemList.year }}年{{ itemList.month }}月</strong>
                <div class="item-list">
                    <a v-for="(item, index) in itemList.list" :key="index" :href="item.link" target="_blank">
                        <span>{{ item.title }}</span>
                        <i></i>
                        <span>{{ item.updateTime.slice(0, 10) }}</span>
                    </a>
                </div>
            </li>
        </ul>
    </div>

    <div @click="doPrevYear()" class="_right-nav-btn night-reading-prev-year" title="上一年"><i class="iconfont">&#xe641;</i></div>
    <div @click="doNextYear()" class="_right-nav-btn night-reading-next-year" title="下一年"><i class="iconfont">&#xe641;</i></div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useToastStore } from '@/stores/toast'
import { useLoadingStore } from '@/stores/loading'

export default {
    setup () {
        const toast = useToastStore()
        const loading = useLoadingStore()
        const noteDatas = ref([])
        const list = []
        for (let i = 2014; i <= 2025; i++) {
            list.push(i)
        }
        const thisYear = (new Date()).getFullYear()
        const yearList = ref(list)
        const curr = ref(thisYear)

        const initData = async () => {
            loading.isShow = true
            const list = await fetch(`./datas/nightReading/${curr.value}.json`).then(res => res.json())
            const datas = {}
            let year = ''
            let month = ''
            let ym = ''
            list.forEach(item => {
                year = item.updateTime.slice(0, 4)
                month = item.updateTime.slice(5, 7)
                ym = year + month
                if (!datas[ym]) {
                    datas[ym] = []
                }
                datas[ym].push(item)
            })
            noteDatas.value = Object.keys(datas).map(ym => {
                datas[ym].sort((a, b) => a.updateTime > b.updateTime ? -1 : 1)
                return {
                    ym,
                    year: ym.slice(0, 4),
                    month: ym.slice(4, 6),
                    list: datas[ym]
                }
            })
            noteDatas.value.sort((a, b) => a.ym > b.ym ? -1 : 1)
            // console.log('noteDatas....', noteDatas)
            loading.isShow = false
        }

        const doPrevYear = () => {
            if (curr.value == 2014) {
                return toast.warning('没有上一年文章了！')
            } else {
                curr.value = curr.value - 1
                initData()
            }
        }

        const doNextYear = () => {
            if (curr.value == thisYear) {
                return toast.warning('没有下一年文章了！')
            } else {
                curr.value = curr.value + 1
                initData()
            }
        }

        onMounted(() => {
            initData()
        })

        return {
            noteDatas,
            curr,
            yearList,
            doPrevYear,
            doNextYear
        }
    }
}
</script>

<style lang="scss">
    @use "./style.scss";
</style>
